<template>
  <div class="pageBox">
    <!-- <div class="contentBox">
    <el-form :model="formInline">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="formInline.dataDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="数据来源">
            <el-select
              v-model="formInline.terminalType"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="量测指标">
            <el-select
              v-model="formInline.appVersionConsistency"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" >查询</el-button>
          <el-button type="primary" >导出</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div> -->
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="60">
        </el-table-column>
        <el-table-column align="center" prop="time" label="时间">
        </el-table-column>
        <el-table-column align="center" prop="value" label="融合终端A相电流">
        </el-table-column>
        <el-table-column align="center" prop="value" label="融合终端B相电流(A)">
        </el-table-column>
        <el-table-column
          align="center"
          prop="value"
          label="融合终端C相电流(A)"
        >
        </el-table-column>
      </el-table>
    </div>
    <div class="paginationBox">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="10"
        layout="total,prev, pager, next, jumper, sizes"
        :total="40"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import measurement from "@/jsonData/measurement.json";
export default {
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },

  data() {
    return {
      formInline: {
        stationName: "", // 变电站名称
        lineName: "", // 线路名称
        transformerName: "", // 配变名称
        areaCode: "", // 台区编号
        terminalESN: "", // 终端ESN
        terminalType: "", // 终端类型
        terminalManufacturer: "", // 终端厂家
        commissioningDate: "", // 终端投运日期
        dataDateRange: "", // 数据日期范围
        commissioningStatus: "", // 投运状态
        scoreRange: "", // 综合得分范围
        appVersionConsistency: "", // app版本是否一致
        onlineRateRange: "", // 在线率范围
        frequentRetirement: "", // 是否频繁投退
      },
      value1: "",
      value: "",
      options: [
        {
          text: "选项1",
          value: 1,
        },
        {
          text: "选项2",
          value: 2,
        },
        {
          text: "选项3",
          value: 3,
        },
      ],
      options2: [
        {
          text: "电流",
          value: 1,
        },
        {
          text: "电压",
          value: 2,
        },
        {
          text: "有功功率",
          value: 3,
        },
        {
          text: "无功功率",
          value: 4,
        },
      ],
      scorePart1: "",
      scorePart2: "",
      tableData:measurement,
      currentPage: 1,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-table th {
  background-color: #118b7d !important;
  color: white !important; /* Optional: Change text color to white for better contrast */
}
.main-content[data-v-567ae6d4],
.page[data-v-567ae6d4] {
  background-color: rgb(16, 190, 190) !important;
}
.pageBox {
  background: #fff;
  padding: 0px 10px 10px 10px;
}
.contentBox {
  background-color: #f9f9f9;
}
::v-deep.el-form-item__label {
  font-size: 14px !important;
}
::v-deep.el-button {
  font-size: 12px !important;
  border: none !important;
}
.paginationBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}
::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #118b7d !important;
  color: #fff;
}
::v-deep.el-pager li.active {
  color: #118b7d !important;
  cursor: default;
}
::v-deep.el-pager li.hover {
  color: #118b7d !important;
  cursor: default;
}
</style>
